<template>
  <div class="goods">
    <!-- 头部组件 -->
    <div class="top">
      <top></top>
    </div>

    <!-- 中间区域 -->
    <div class="center">
      <div class="main">
        <!-- 中间上部区域 -->
        <div class="center-top">
          <ctop v-bind:imageList="LunBoTuList" v-bind:goodsDeatil="goodsDeatil"></ctop>
        </div>
        <!-- 中间下部区域 -->
        <div class="center-bottom">
          <cbottom v-bind:imageList="DescribeImageList"></cbottom>
        </div>
      </div>
    </div>

    <!-- 底部组件 -->
    <div class="bottom">
      <bottom></bottom>
    </div>
  </div>
</template>

<script>
//  引入头部组件
import top from "../../components/header";
//  引入底部组件
import bottom from "../../components/footer";
//  引入中间上部区域组件
import ctop from "./components/center-top";
//  引入中间下部区域组件
import cbottom from "./components/center-bottom";

import {
  selectGoodsLunBoTuImageListByLunBoTuListId,
  selectGoodsDescribeImageListByDescribeImgListId,
  selectGoodsDetailById,
} from "@/api/goods/index.js";
 
export default {
  components: {
    top,
    bottom,
    ctop,
    cbottom,
  },
  data() {
    return {
      //  当前商品的主键（从前面的页面中传来的参数，用于查询商品的信息）
      goodsID: "",
      //  当前商品轮播图展示的图片
      LunBoTuList: [],
      //  当前商品描述的图片
      DescribeImageList: [],
      //  当前商品的信息
      goodsDeatil: {},
      lunBoTuImgListId: 1,
      describeImgListId: 1,
    };
  },
  async created() {
    //  页面创建是自动调用

    //  商品的主键
    this.goodsID = this.$route.params.goodsID; //  这句可有可无，没有实际意义

    //  使用同步方式等待数据返回，如果没有数据返回则一直等待，不执行后续代码
    this.goodsID = await sessionStorage.getItem("goodsID");
    // console.log(this.goodsID);

    //  通过商品主键查询商品信息(使用await 将异步方法同步调用)
    await selectGoodsDetailById(this.goodsID).then(
      (res) => {
        //console.log(res);
        this.goodsDeatil = res;
        this.lunBoTuImgListId = this.goodsDeatil.lunBoTuImgListId;
        this.describeImgListId = this.goodsDeatil.describeImgListId;
      },
      (err) => {
        console.log(err);
      }
    );
    //  通过商品轮播图主键查询商品轮播图展示的图片信息(使用await 将异步方法同步调用)
    await selectGoodsLunBoTuImageListByLunBoTuListId(this.goodsID).then(
      (res) => {
        //console.log(res);
        let tempList = res;

        tempList.forEach((item) => {
          let tempItem = {
            id: item.id,
            url: item.imgUrl,
          };

          this.LunBoTuList.push(tempItem);
        });

        // console.log(this.LunBoTuList);
      },
      (err) => {
        console.log(err);
      }
    );

    // 通过商品描述主键查询商品描述展示图信息(使用await 将异步方法同步调用)
    await selectGoodsDescribeImageListByDescribeImgListId(this.goodsID).then(
      (res) => {
        // console.log(res);
        let tempList = res;

        tempList.forEach((item) => {
          let tempItem = {
            id: item.id,
            url: item.imgUrl,
          };
          this.DescribeImageList.push(tempItem);
        });
      },
      (err) => {
        console.log(err);
      }
    );
  },
};
</script>

<style>
.center-bottom {
  margin-top: 50px;
}
</style>
